<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id='boxPolicy' class="policy-content">
    <div id='policy' onmouseover="StopPolicy()" onmouseout="UpPolicy()">
      <!-- <ul> -->
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <!-- <div>6</div>
        <div>7</div>
        <div>8</div> -->
        <!-- <div>9</div> -->
      <!-- </ul> -->
    </div>
    <div id='policy2'>
      <!-- <ul> -->
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <!-- <div>6</div>
        <div>7</div>
        <div>8</div> -->
        <!-- <div>9</div> -->
      <!-- </ul> -->
    </div>
  </div>

  <div style='width:200px;height:200px;background:antiquewhite;overflow-y: scroll;margin: 0 auto;'
    class="a">
    <div style="height: 300px;display: flex;align-items: center;">
      1111
    </div>
  </div>
  <div style="height: 500px;"></div>
</body>
<script>
  var speedPolicy=50;
  var iPolicy=setInterval(()=>{ScrollUpPolicy()},speedPolicy);
  function UpPolicy(){
    iPolicy=setInterval(()=>{ScrollUpPolicy()},speedPolicy)
  };
  function StopPolicy(){
    clearInterval(iPolicy)
  }
  function ScrollUpPolicy(){
    var boxPolicy=document.getElementById("boxPolicy"),
      policy=document.getElementById("policy"),
      policy2=document.getElementById("policy2")

    boxPolicy.scrollTop >= policy.scrollHeight?
                            boxPolicy.scrollTop=0 : boxPolicy.scrollTop++
  }
</script>

<style>
  #policy > div,#policy2 > div {
    height: 20px;
  }
  .policy-content{
    font-size: 12px;
    overflow: hidden;
    max-height: 100px;

    width: 100px;
    margin:  100px auto;
  }
  #policy,#policy2{
    height: 100px;
    background: blue;
    color: white;
  }

  ::-webkit-scrollbar {
    width: 5px; 
    /* height: 4px; */
  }
  ::-webkit-scrollbar-thumb {
    border-radius: 4px;
    /* background: rgba(0,0,0,.2) */
    background:rgba(15, 19, 88, 0.26)
  }
  ::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
    border-radius: 0;
    background: white;
  }

  /* 定义类名为a的滚动条 */
  .a::-webkit-scrollbar {
      width: 6px;
      background-color: #eee;
    }
  .a::-webkit-scrollbar-thumb{
    /* border-radius:10px; */
    background-color: #c1c1c1;
    /* background-image: -webkit-linear-gradient(90deg, #12c2e9, #c471ed, #f64f59); */
  }
  .a{
    scrollbar-width: thin;
    scrollbar-color: #c1c1c1 #eee;
  }

</style>
</html>